/**
 * Created by eaTong on 2018/12/21 .
 * Description:
 */
import React from 'react';
import {
  Container,
  Header,
  Content,
  Button,
  Text,
  Form,
  Item,
  Input,
  Label,
  List,
  ListItem,
  View,
  Textarea, Toast
} from 'native-base';
import BaseComponents from "../components/BaseComponents";
import moment from 'moment';
import MultiSelect from 'react-native-multiple-select';
import ajax from "../utils/ajax";

export default class AddEmployee extends BaseComponents {
  static navigationOptions = {
    title: '添加员工',

  };
  state = {
    form: {
      is_login: 1,
      is_admin: 0,
      position: '体验',
      gender: '男',
    },
    selectedRoles: [],
    selectedPositions: [],
    roles: [],
    positions: [],
  };

  componentWillMount() {
    this.state.form.entry_time = moment().format();
    this.state.form.department_id = 12;
    this.getRoles();
    this.getPositions();
  }

  async getRoles() {
    const roles = await ajax({
      url: '/api/authority/role/get',
    });
    this.setState({roles});
  }

  async getPositions() {
    const positions = await ajax({
      url: '/api/authority/position/get_activated_pos',
    });
    this.setState({positions});
  }

  async addEmployee() {

    const department_id = [this.props.navigation.getParam('currentDepartmentId')];

    const {form, selectedRoles, selectedPositions} = this.state;
    if (!form.employee_name || !form.telephone || selectedRoles.length === 0 || selectedPositions.length === 0) {
      Toast.show({
        text: "必填项未填!",
        duration: 3000,
        position: "top"
      });
      return;
    }

    const data = {...form, department_id, roles_id: selectedRoles, positions_id: selectedPositions};
    await ajax({
      data,
      url: '/api/employee/add_one_employee_with_multiple_dept',
    });
    Toast.show({
      text: "添加成功!",
      duration: 3000,
      position: "top"
    });

    // this.props.navigation.

  }

  onSelectRoles(selectedRoles) {
    this.setState({selectedRoles});
  }

  onSelectPositions(selectedPositions) {
    this.setState({selectedPositions});
  }

  render() {
    const form = this.state.form || {};
    const {positions, selectedPositions, roles, selectedRoles} = this.state;
    return (
      <Container>
        <Content>
          <Form>
            <Item inlineLabel>
              <Label>员工姓名</Label>
              <Input onChangeText={(text) => this.onChangeForm('employee_name', text)} value={form.account}/>
            </Item>
            <Item inlineLabel>
              <Label>电话号码</Label>
              <Input
                onChangeText={(text) => this.onChangeForm('telephone', text)}
                value={form.account}
                keyboardType='numeric'
                textContentType='telephoneNumber'
              />
            </Item>
            <Item inlineLabel>
              <View style={{flex: 1}}>
                <MultiSelect
                  hideTags
                  items={roles}
                  uniqueKey="role_id"
                  onSelectedItemsChange={(roles) => this.onSelectRoles(roles)}
                  selectedItems={selectedRoles}
                  selectText="系统角色"
                  displayKey="role_name"
                />
              </View>
            </Item>
            <Item inlineLabel>
              <View style={{flex: 1}}>
                <MultiSelect
                  hideTags
                  items={positions}
                  uniqueKey="id"
                  onSelectedItemsChange={(roles) => this.onSelectPositions(roles)}
                  selectedItems={selectedPositions}
                  selectText="服务岗位"
                  displayKey="position_name"
                />
              </View>
            </Item>

            <Item>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="备注"
                style={{flex: 1}}
                onChangeText={(text) => this.onChangeForm('remark', text)}
                value={form.remark}/>
            </Item>

            <Button full primary style={{marginTop: 20}} onPress={() => this.addEmployee()}>
              <Text>添加</Text>
            </Button>
          </Form>
        </Content>
      </Container>
    );
  }
}
